<template>
  <div class="login-box">
    <div class="login-bg"></div>
    <div class="logo"></div>
    <div class="login-btn">
      <div class="title">打造属于你自己的专属简历</div>
      <button class="login" @click="toLogin">登录</button>
      <button class="register" @click="toRegister">注册</button>
    </div>
  </div>
</template>
<script setup lang="ts">
const toLogin = () => {
  uni.navigateTo({ url: "/pages/login/login" });
};
const toRegister = () => {
  uni.navigateTo({ url: "/pages/login/register" });
};
</script>
<style lang="scss" scoped>
.login-box {
  height: 100vh;
  width: 750rpx;
  background: url("../../static/overlay-bg.png");
  background-size: 100% 100%;
  position: relative;
}
.login-bg {
  height: 100vh;
  width: 750rpx;
  background: url("../../static/overlay.png");
  background-size: 100% 100%;
  opacity: 0.2;
  position: absolute;
  background-repeat: no-repeat;
}
.logo {
  position: absolute;
  width: 150rpx;
  height: 140rpx;
  left: 300rpx;
  top: 180rpx;
  background: url("../../static/logo.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.login-btn {
  position: absolute;
  top: 600rpx;
  width: 100%;
}
.title {
  text-align: center;
  color: white;
  // margin-top: 240rpx;
}
.login {
  width: 654rpx;
  height: 96rpx;
  border-radius: 8rpx;
  background: rgba(59, 89, 152, 1);
  color: rgba(237, 237, 237, 1);
  margin-top: 80rpx;
}
.register {
  width: 654rpx;
  height: 96rpx;
  border-radius: 8rpx;
  color: rgba(237, 237, 237, 1);
  background: rgba(0, 172, 237, 1);
  margin-top: 20rpx;
}
</style>
